Skip to content

feat(web): expand context meter into a session context tab#2799

Open
imabdulazeez wants to merge 7 commits into
pingdotgg:mainfrom
imabdulazeez:feat/context-usage
Open

feat(web): expand context meter into a session context tab#2799
imabdulazeez wants to merge 7 commits into
pingdotgg:mainfrom
imabdulazeez:feat/context-usage

Conversation

@imabdulazeez
Copy link
Copy Markdown
Contributor

@imabdulazeez imabdulazeez commented May 25, 2026 •
edited
Loading

What Changed

Adds a "Session context" tab that opens from the context window meter in the composer (Inspired by OpenCode).

  • Provider / model and whether the session auto-compacts
  • Total tokens used vs. the model's context limit, with a usage percentage
  • Per-bucket breakdown: input, output, reasoning, cache-read, total processed
  • Message counts (user / assistant / total) and session timing (created, last activity)
  • An estimated "where context is going" segmented bar across system / user / assistant / tool / other, derived from the thread's messages and activities

Why

Today the only context-window signal in the UI is the small ring in the composer footer. For long sessions it's hard to answer:

  • How close am I actually to the limit, in tokens, not just "a ring color"?
  • Is my context dominated by tool output, by a large system prompt, or by message history?

Surfacing this in a dedicated tab (rather than a hover popover) keeps the composer footer compact while giving an auditable view when the user actually wants to inspect a session. The breakdown is explicitly an estimate, useful for "where is my context going?" intuition without claiming provider-exact accounting.

Click the context ring to trigger this

Related: #2518 (compact per-turn session stats footer) asks for a related but per-turn view; this PR adds the session-level counterpart. Not intended to close that issue.

Distinct from #1732, which surfaces account-level provider quota (session/weekly plan usage) in Settings; this PR is about per-thread context-window usage shown off the composer.

UI Changes

Context Tab

image

Checklist

  • This PR is small and focused (Not very small, but definitely focused)
  • I explained what changed and why
  • I included before/after screenshots for any UI changes (No before screenshots)
  • I included a video for animation/interaction changes (N/A)

Note

Expand context meter into a session context tab in the chat thread route

  • Adds a new SessionContextTab right-hand panel that displays token usage, a per-role breakdown bar, and a collapsible raw messages list, driven by new getSessionContextMetrics and estimateSessionContextBreakdown utilities.
  • Adds a tab=context URL search param that opens the panel inline (resizable sidebar) or in a sheet on narrow layouts, with width persisted to local storage.
  • Converts ContextWindowMeter from a hover popover to a clickable button that sets tab=context in the URL.
  • ContextWindowMeter is now only rendered when an onOpenContextTab handler is provided, so it is hidden in contexts that don't support the tab.
  • Behavioral Change: opening or closing the diff panel now clears the tab search param, and vice versa; stripDiffSearchParams also strips tab.

Macroscope summarized 6bbad50.

@imabdulazeez
Add session context tab with metrics and breakdown
abcfe06 
- SessionContextTab component displays token usage, distribution by role, and raw messages
- Utilities for extracting metrics from thread state and estimating token breakdown
- Wire context tab into chat UI via onOpenContextTab callback
@imabdulazeez
Improve context metrics with fallbacks and empty filtering
c7c9951 
- Add fallback to cumulative token fields (input, output, etc)
- Prefer usedTokens for total calculation
- Filter empty, zero, and dash values from metrics display
- Enhance button accessibility with focus-visible styles
- Remove cacheWrite field from metrics
@imabdulazeez
Scope Tailwind group class in ContextWindowMeter
52bd832 
Use group/meter to prevent hover state conflicts with nested elements
@imabdulazeez
Simplify context meter and enhance metrics display
fe50fa6 
- Make ContextWindowMeter callback required and remove popover fallback
- Add total processed tokens and auto-compaction status to metrics
- Update context tab title and improve stat layout
@imabdulazeez
Clear tab state when toggling diff panel view
01559bc
@imabdulazeez
Standardize code formatting across session context files
b1ea15f
@coderabbitai
Copy link
Copy Markdown

coderabbitai Bot commented May 25, 2026 •
edited
Loading

Important

Review skipped

Auto reviews are disabled on this repository. Please check the settings in the CodeRabbit UI or the .coderabbit.yaml file in this repository. To trigger a single review, invoke the @coderabbitai review command.

⚙️ Run configuration

Configuration used: Repository UI

Review profile: CHILL

Plan: Pro

Run ID: 1e5811d1-500a-46e3-b05f-d196fccce7f3

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

  • 🔍 Trigger review
✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

@github-actions github-actions Bot added vouch:unvouched PR author is not yet trusted in the VOUCHED list. size:XL 500-999 changed lines (additions + deletions). labels May 25, 2026
@macroscopeapp
Copy link
Copy Markdown
Contributor

macroscopeapp Bot commented May 25, 2026 •
edited
Loading

Approvability

Verdict: Needs human review

Unable to check for correctness in 6bbad50. This PR introduces a new feature with significant new UI components (SessionContextTab, metrics, breakdown logic) and new user-facing navigation behavior. New features introducing new user-facing capabilities warrant human review.

You can customize Macroscope's approvability policy. Learn more.

@imabdulazeez
Copy link
Copy Markdown
Contributor Author

imabdulazeez commented May 25, 2026

CI passes locally, not sure how to fix this without modifying the ci.yml file

Error: Electron failed to install correctly, please delete node_modules/electron and try installing again

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

No one assigned

Labels

size:XL 500-999 changed lines (additions + deletions). vouch:unvouched PR author is not yet trusted in the VOUCHED list.

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@imabdulazeez